<template>
	<view v-if="active.active_id" class="container">
		<view>
			<!-- 商品图片 -->
			<view class="goods-swiper">
				<swiper :autoplay="autoplay" @change="setCurrent" class="banner-box  swiper-box" :duration="duration" :indicator-dots="indicatorDots" :interval="interval" :circular="true">
					<swiper-item v-for="(item, index) in goods.image" :key="index" @tap="onPreviewImages" :data-index="index"><image class="slide-image" mode="aspectFill" :src="item.file_path"></image></swiper-item>
				</swiper>
				<view class="banner-num">
					<text>{{ currentIndex }}</text>
					<text>/</text>
					<text>{{ goods.image.length }}</text>
				</view>
			</view>
			<!-- 商品信息 -->
			<view class="goods-info m-top20">
				<!-- 价格、销量 -->
				<view class="info-item info-item__top dis-flex flex-x-between flex-y-end">
					<view class="block-left dis-flex flex-y-end">
						<view class="active-tag"><text>限时砍价</text></view>
						<!-- 底价 -->
						<text class="floor-price__samll">￥</text>
						<text class="floor-price">{{ active.floor_price }}</text>
						<!-- 原价 -->
						<text class="original-price">￥{{ goods.goods_sku.goods_price }}</text>
					</view>
					<view class="block-right dis-flex">
						<!-- 销量 -->
						<view class="goods-sales">
							<text>{{ active.active_sales }}人已砍成</text>
						</view>
					</view>
				</view>
				<!-- 标题、分享 -->
				<view class="info-item info-item__name dis-flex flex-y-center">
					<view class="goods-name flex-box">
						<text class="twolist-hidden">{{ goods.goods_name }}</text>
					</view>
					<view class="goods-share__line"></view>
					<view class="goods-share">
						<form @submit="onClickShare" report-submit="true">
							<button formType="submit" class="share-btn dis-flex flex-dir-column">
								<text class="share__icon iconfont icon-fenxiang"></text>
								<text class="f-24">分享</text>
							</button>
						</form>
					</view>
				</view>
				<!-- 商品卖点 -->
				<view v-if="goods.selling_point" class="info-item info-item_selling-point">
					<text>{{ goods.selling_point }}</text>
				</view>
				<!-- 活动倒计时 -->
				<view v-if="!active.is_end" class="info-item info-item_status info-item_countdown">
					<text class="countdown-icon iconfont icon-naozhong"></text>
					<block v-for="(item, index) in actEndTimeList" :key="index">
						<text>距离活动结束 还剩{{ item.dynamic.hou }}时{{ item.dynamic.min }}分{{ item.dynamic.sec }}秒</text>
					</block>
				</view>
				<!-- 活动已结束 -->
				<view v-if="active.is_end" class="info-item info-item_status info-item_end">
					<text class="countdown-icon iconfont icon-naozhong"></text>
					<text>砍价活动已结束，下次记得早点来哦~</text>
				</view>
			</view>
			<!-- 砍价玩法 -->
			<view class="bargain-rules top-nav-bar m-top20 b-f">
				<form @submit="onToggleRules" report-submit="true">
					<button formType="submit" class="btn-normal">
						<view class="item-title dis-flex">
							<view class="block-left flex-box"><text>砍价玩法</text></view>
							<view class="block-right"><text class="show-more col-9">查看规则</text></view>
						</view>

						<!-- 砍价步骤 -->
						<view class="rule-simple dis-flex flex-x-around">
							<view class="simple-item dis-flex flex-dir-column flex-y-center">
								<view class="i-number dis-flex flex-x-center flex-y-center"><text class="f-30">1</text></view>
								<view class="i-text f-28">点击砍价</view>
							</view>
							<view class="simple-item dis-flex flex-dir-column flex-y-center">
								<view class="i-number dis-flex flex-x-center flex-y-center"><text class="f-30">2</text></view>
								<view class="i-text f-28">找人帮砍</view>
							</view>
							<view class="simple-item dis-flex flex-dir-column flex-y-center">
								<view class="i-number dis-flex flex-x-center flex-y-center"><text class="f-30">3</text></view>
								<view class="i-text f-28">砍到最低</view>
							</view>
							<view class="simple-item dis-flex flex-dir-column flex-y-center">
								<view class="i-number dis-flex flex-x-center flex-y-center"><text class="f-30">4</text></view>
								<view class="i-text f-28">优惠购买</view>
							</view>
						</view>
					</button>
				</form>
			</view>
			<!-- 商品评价 -->
			<view class="goods-comment m-top20 b-f" v-if="goods.comment_data_count">
				<view class="item-title dis-flex">
					<view class="block-left flex-box">
						<text>评价 ({{ goods.comment_data_count }}条)</text>
					</view>
					<view class="block-right">
						<text catchtap="onTargetToComment" class="show-more col-9">查看更多</text>
						<text class="iconfont icon-xiangyoujiantou"></text>
					</view>
				</view>
				<!-- 评论列表 -->
				<view class="comment-list">
					<view class="comment-item" v-for="(item, index) in goods.comment_data" :key="index">
						<view class="comment-item_row dis-flex flex-y-center">
							<view class="user-info dis-flex flex-y-center">
								<image class="avatar" :src="item.user.avatarUrl"></image>
								<text class="user-name">{{ item.user.nickName }}</text>
							</view>
							<view class="star-rating">
								<text class="star-icon iconfont icon-shoucang active"></text>
								<block v-if="item.score < 30">
									<text class="star-icon iconfont icon-shoucang active"></text>
									<text class="star-icon iconfont icon-shoucang active"></text>
								</block>
								<block v-if="item.score < 20">
									<text class="star-icon iconfont icon-shoucang active"></text>
									<text class="star-icon iconfont icon-shoucang active"></text>
								</block>
							</view>
						</view>
						<view class="goods-comment-cont m-top20">
							<text class="f-26 twolist-hidden">{{ item.content }}</text>
						</view>
						<view class="f-22 col-9 m-top10">{{ item.create_time }}</view>
					</view>
				</view>
			</view>
			<!-- 商品描述 -->
			<view class="goods-content m-top20">
				<view class="item-title b-f"><text>商品描述</text></view>
				<block v-if="goods.content != ''">
					<view class="goods-content__detail b-f">
						<!-- <rich-text :nodes="content"></rich-text> -->
						<u-parse :content="content"></u-parse>
					</view>
				</block>
				<block v-else>
					<view class="yoshop-notcont">
						<text class="iconfont icon-wushuju"></text>
						<text class="cont">亲，暂无商品描述</text>
					</view>
				</block>
			</view>
		</view>
		<!-- 底部选项卡 -->
		<view class="footer-fixed">
			<view class="footer-container dis-flex">
				<!-- 导航图标 -->
				<view class="foo-item-fast dis-flex flex-x-center flex-y-center">
					<form @submit="onTargetHome" report-submit>
						<button class="btn-normal" formType="submit">
							<view class="fast-item fast-item_home">
								<view class="fast-icon"><text class="iconfont icon-shouye"></text></view>
								<view class="fast-text"><text>首页</text></view>
							</view>
						</button>
					</form>
					<!-- #ifdef MP -->
					<button class="btn-normal" open-type="contact">
						<view class="fast-item">
							<view class="fast-icon"><text class="iconfont icon-kefu1"></text></view>
							<view class="fast-text"><text>客服</text></view>
						</view>
					</button>
					<!-- #endif -->
					<!-- #ifndef MP -->
					<button class="btn-normal" @tap="callPhone">
						<view class="fast-item">
							<view class="fast-icon"><text class="iconfont icon-kefu1"></text></view>
							<view class="fast-text"><text>客服</text></view>
						</view>
					</button>
					<!-- #endif -->
				</view>
				<!-- 操作按钮 -->
				<view class="foo-item-trigger flex-box">
					<form @submit="onSubmit" report-submit>
						<button v-if="active.is_start && !active.is_end" class="opt-btn btn-main btn-normal" formType="submit">
							<text>{{ is_partake ? '继续砍价' : '立即砍价' }}</text>
						</button>
						<button v-else class="opt-btn btn-gray btn-normal">
							<text>{{ active.is_end ? '活动已结束' : '活动未开启' }}</text>
						</button>
					</form>
				</view>
			</view>
		</view>
		<!-- 确认购买弹窗 -->
		<popup :show="showBottomPopup" type="bottom" @close="onToggleTrade">
			<view class="popup__trade">
				<!-- 关闭按钮 -->
				<view class="trade-close dis-flex flex-x-center flex-y-center" @tap="onToggleTrade"><text class="iconfont icon-close f-26"></text></view>
				<!-- 主体信息 -->
				<view class="trade-main">
					<view class="goods-info dis-flex">
						<!-- 图片名称 -->
						<view class="goods-image" @tap="onPreviewSkuImage"><image :src="skuCoverImage"></image></view>
						<view class="block-right flex-box">
							<view class="block-item dis-flex flex-y-end">
								<!-- 商品价 -->
								<view class="goods-price col-m">
									<text class="f-26">￥</text>
									<text class="f-36">{{ active.floor_price }}</text>
								</view>
								<!-- 划线价 -->
								<view class="line-price" v-if="line_price > 0">
									<text>{{ goods.goods_sku.goods_price }}</text>
								</view>
							</view>
							<view class="goods-stock dis-flex">
								<text class="flex-box f-26 col-7">库存：{{ stock_num }}</text>
							</view>
						</view>
					</view>
					<!-- 规格列表 -->
					<view class="goods-attr">
						<!-- 滚动容器 -->
						<scroll-view class="goods-attr--scroll" :scroll-y="true" v-if="goods.spec_type != 10">
							<view class="group-item" v-for="(attr, attr_idx) in goodsMultiSpec.spec_attr" :key="attr_idx">
								<view class="tips-text" :data-id="attr.group_id">{{ attr.group_name }}</view>
								<view class="spec-item " :class="{ cur: item.checked }" v-for="(item, item_idx) in attr.spec_items" :key="item_idx" :data-attr-idx="attr_idx" :data-item-idx="item_idx" @tap="onSwitchSpec">{{ item.spec_value }}</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<!-- 底部操作栏 -->
				<view class="footer-fixed f-30">
					<view v-if="stock_num > 0" class="flex-box">
						<form @submit="onSubmit2" report-submit>
							<button class="opt-btn btn-main btn-normal" formType="submit"><text>确定</text></button>
						</form>
					</view>
					<view class="flex-box opt-btn btn-gray" v-else>暂无现货</view>
				</view>
			</view>
		</popup>

		<!-- 商品海报 弹出层 -->
		<popup :show="share.showPopup" @close="onTogglePopup">
			<view class="pop-poster pop-example__container">
				<!-- 关闭按钮 -->
				<view class="pop-close dis-flex flex-x-center flex-y-center" @tap="onTogglePopup"><text class="iconfont icon-shanchu f-30 col-9"></text></view>
				<form @submit="onSavePoster" report-submit="true">
					<view class="poster__image"><image mode="widthFix" :src="qrcode"></image></view>
					<view class="poster__tips m-top10 t-c"></view>
					<view class="padding-box m-top10 profile-btn"><button formType="submit">保存图片</button></view>
				</form>
			</view>
		</popup>
		<!-- 分享按钮 -->
		<actionsheet :show="share.show" :actions="share.actions" :cancel-text="share.cancelText" :cancel-with-mask="share.cancelWithMask" @cancel="onCloseShare" @actionclick="onClickShareItem" mask-class="tiny" />
		<!-- 快捷导航 -->
		<shortcut bottom="120rpx"></shortcut>

		<!-- 返回顶部 -->
		<view @tap="onScrollTop" class="widget-goTop" v-if="floorstatus"><text class="iconfont icon-fanhuidingbu"></text></view>
		<custom-dialog ref="ruleDialog"></custom-dialog>
	</view>
</template>

<script>
import Route from '@/utils/Route.js';
import Tools from '@/utils/Tools.js';
import shortcut from '@/components/shortcut/shortcut.vue';
import popup from '@/components/popup/index.vue';
import customDialog from '@/components/dialog/index.vue';
import Dialog from '@/components/dialog/dialog.js';
// 倒计时插件
import CountDown from '@/utils/countdown.js';
import uParse from '@/components/u-parse/parse.vue';
import Share from '@/utils/Share.js';
import actionsheet from '@/components/actionsheet/index.vue';
let goodsSpecArr = [];

export default {
	components: {
		popup,
		shortcut,
		customDialog,
		uParse,
		actionsheet
	},
	data() {
		return {
			indicatorDots: true, // 是否显示面板指示点
			autoplay: true, // 是否自动切换
			interval: 3000, // 自动切换时间间隔
			duration: 800, // 滑动动画时长

			currentIndex: 1, // 轮播图指针
			floorstatus: false, // 返回顶部

			detail: {}, // 商品详情信息
			goods_price: 0, // 商品价格
			line_price: 0, // 划线价格
			stock_num: 0, // 库存数量

			goods_num: 1, // 商品数量
			goods_sku_id: 0, // 规格id
			cart_total_num: 0, // 购物车商品总数量
			goodsMultiSpec: {}, // 多规格信息

			content: '',
			// 分享按钮组件
			share: Share.actionList(),

			// 返回顶部
			showTopWidget: false,

			// 倒计时
			actEndTimeList: [],

			active: {}, // 砍价活动详情
			goods: {}, // 商品详情
			setting: {}, // 砍价配置
			is_partake: false, // 当前用户是否正在参与
			task_id: false, // 当前用户正在参与的任务id
			skuCoverImage: '',
			showBottomPopup: false,
			qrcode: '',
			tel: ''
		};
	},
	onLoad(options) {
		const scene = Tools.getSceneData(options);
		// 砍价商品id
		this.active_id = options.active_id ? options.active_id : scene.aid;
		this.getTel();
	},
	onShow() {
		this.getActiveDetail();
	},
	onPageScroll(e) {
		this.floorstatus = e.scrollTop > 200;
	},
	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage() {
		// 构建页面参数
		let params = App.getShareUrlParams({
			active_id: this.active.active_id
		});
		return {
			title: this.detail.goods_name,
			path: `/pages/bargain/goods/index?${params}`
		};
	},
	methods: {
		/**
		 * 获取客服电话
		 */
		getTel() {
			this.$get(this.$api.getParameterTel, {}, res => {
				this.tel = res.data.tel;
			});
		},
		/**
		 * 拨打客服电话
		 */
		callPhone() {
			uni.makePhoneCall({
				phoneNumber: this.tel
			});
		},
		setShare() {
			// #ifdef H5
			this.$wechat.updateAppMessageShareData({
				title: this.detail.goods_name, // 分享标题
				desc: '¥' + this.goods_price, // 分享描述
				link: Tools.getShareUrl(Tools.getPagePath(), { active_id: this.active_id }), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: this.skuCoverImage // 分享图标
			});
			this.$wechat.onMenuShareTimeline({
				title: this.detail.goods_name, // 分享标题
				link: Tools.getShareUrl(Tools.getPagePath(), { active_id: this.active_id }), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: this.skuCoverImage // 分享图标
			});
			// #endif
		},
		/**
		 * 获取砍价商品信息
		 */
		getActiveDetail() {
			this.$get(this.$api.getBargainActiveDetail, { active_id: this.active_id }, res => {
				let data = this.initData(res.data);
				console.log(data);
				this.actEndTimeList = data.actEndTimeList;
				this.active = data.active;
				this.goods = data.goods;
				this.goodsMultiSpec = data.goodsMultiSpec;
				this.goods_price = data.goods_price;
				this.goods_sku_id = data.goods_sku_id;
				this.is_partake = data.is_partake;
				this.line_price = data.line_price;
				this.setting = data.setting;
				this.skuCoverImage = data.skuCoverImage;
				this.stock_num = data.stock_num;
				this.task_id = data.task_id;

				if (!data.active.is_end) {
					CountDown.onSetTimeList(this, 'actEndTimeList');
				}

				this.$nextTick(() => {
					// #ifdef H5
					this.$wechat.initJssdk(this.setShare());
					// #endif
				});
			});
		},
		/**
		 * 初始化详情数据
		 */
		initData(data) {
			// 商品详情
			let goodsDetail = data.goods;
			// 富文本转码
			if (goodsDetail.content.length > 0) {
				this.content = goodsDetail.content;
			}
			// 商品价格/划线价/库存
			data.goods_sku_id = goodsDetail.goods_sku.spec_sku_id;
			data.goods_price = goodsDetail.goods_sku.goods_price;
			data.line_price = goodsDetail.goods_sku.line_price;
			data.stock_num = goodsDetail.goods_sku.stock_num;
			// 商品封面图(确认弹窗)
			data.skuCoverImage = goodsDetail.goods_image;
			// 多规格商品封面图(确认弹窗)
			if (goodsDetail.spec_type == 20 && goodsDetail.goods_sku['image']) {
				data.skuCoverImage = goodsDetail.goods_sku['image']['file_path'];
			}
			// 初始化商品多规格
			if (goodsDetail.spec_type == 20) {
				// console.log(this.initManySpecData(goodsDetail.goods_multi_spec))
				data.goodsMultiSpec = this.initManySpecData(goodsDetail.goods_multi_spec);
			}
			// 记录活动到期时间
			data.actEndTimeList = [
				{
					date: data.active.end_time
				}
			];
			return data;
		},
		/**
		 * 初始化商品多规格
		 */
		initManySpecData(data) {
			goodsSpecArr = [];
			for (let i in data.spec_attr) {
				for (let j in data.spec_attr[i].spec_items) {
					if (j < 1) {
						data.spec_attr[i].spec_items[0].checked = true;
						goodsSpecArr[i] = data.spec_attr[i].spec_items[0].item_id;
					}
				}
			}
			return data;
		},
		/**
		 * 设置轮播图当前指针 数字
		 */
		setCurrent(e) {
			this.currentIndex = e.detail.current + 1;
		},

		/**
		 * 浏览商品图片
		 */
		onPreviewImages(e) {
			let index = e.currentTarget.dataset.index;
			let imageUrls = [];
			this.goods.image.forEach(item => {
				imageUrls.push(item.file_path);
			});
			uni.previewImage({
				current: imageUrls[index],
				urls: imageUrls
			});
		},

		/**
		 * 预览Sku规格图片
		 */
		onPreviewSkuImage(e) {
			wx.previewImage({
				current: this.skuCoverImage,
				urls: this.skuCoverImage
			});
		},
		onScrollTop() {
			uni.pageScrollTo({
				scrollTop: 0
			});
		},
		/**
		 * 确认砍价
		 */
		onSubmit(e) {
			// 记录formId
			this.$saveFormId(e.detail.formId);
			// 判断是否已参与当前的砍价活动，如果已参与的话跳转到砍价任务
			if (this.is_partake) {
				Route.navigateTo({
					url: '../task/index?task_id=' + this.task_id
				});
				return;
			}
			// 多规格商品，弹出选择器
			if (this.goods.spec_type == 20) {
				this.onToggleTrade();
				return;
			}
			// 确认发起砍价
			this.onCheckout();
		},
		/**
		 * 确认砍价(选择规格后的二次确认)
		 */
		onSubmit2(e) {
			// 记录formId
			this.$saveFormId(e.detail.formId);
			// 关闭选择器
			this.onToggleTrade();
			// 确认发起砍价
			this.onCheckout();
		},
		/**
		 * 确认购买弹窗
		 */
		onToggleTrade(e) {
			if (typeof e === 'object') {
				// 记录formId
				if (e.hasOwnProperty('detail')) {
					e.detail.hasOwnProperty('formId') && this.$saveFormId(e.detail.formId);
				}
			}
			this.showBottomPopup = !this.showBottomPopup;
		},
		/**
		 * 跳转到首页
		 */
		onTargetHome(e) {
			// 记录formid
			this.$saveFormId(e.detail.formId);
			Route.navigateTo({ url: '/pages/index/index' });
		},
		/**
		 * 显示砍价规则
		 */
		onToggleRules(e) {
			// 记录formId
			this.$saveFormId(e.detail.formId);
			// 显示砍价规则
			// let _this = this;
			Dialog({
				title: '砍价规则',
				selector: 'ruleDialog',
				message: this.setting.bargain_rules,
				isScroll: true, // 滚动
				buttons: [
					{
						text: '关闭',
						color: 'red',
						type: 'cash'
					}
				]
			});
			// this.$nextTick(() => {
			// 	this.dislogShow = true;
			// });
		},
		/**
		 * 关闭分享选项
		 */
		onCloseShare() {
			this.$set(this.share, 'show', false);
		},
		/**
		 * 显示分享选项
		 */
		onClickShare(e) {
			this.$saveFormId(e.detail.formId);
			this.$set(this.share, 'show', true);
		},
		/**
		 * 点击生成商品海报
		 */
		onClickShareItem(e) {
			console.log(e);
			if (e.index == 0) {
				// 显示商品海报
				this.showPoster();
			} else if (e.index == 1) {
				Share.send(Tools.getShareUrl(Tools.getPagePath(), { active_id: this.active_id }));
			}
			this.onCloseShare();
		},
		/**
		 * 显示商品海报图
		 */
		showPoster() {
			uni.showLoading({
				title: '加载中'
			});
			this.$get(
				this.$api.getBargainActivePoster,
				{ active_id: this.active_id },
				res => {
					this.qrcode = res.data.qrcode;
					this.$nextTick(() => {
						this.onTogglePopup();
					});
				},
				null,
				() => {
					uni.hideLoading();
				}
			);
		},
		/**
		 * 切换商品海报
		 */
		onTogglePopup() {
			this.$set(this.share, 'showPopup', !this.share.showPopup);
		},
		/**
		 * 保存海报图片
		 */
		onSavePoster(e) {
			// 记录formId
			this.$saveFormId(e.detail.formId);
			// #ifdef H5
			uni.showToast({
				title: '当前环境不支持下载图片，请长按保存',
				icon: 'none'
			});
			return false;
			// #endif
			uni.showLoading({
				title: '加载中'
			});
			// 下载海报图片
			uni.downloadFile({
				url: this.qrcode,
				success: res => {
					uni.hideLoading();
					// 图片保存到本地
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success: data => {
							uni.showToast({
								title: '保存成功',
								icon: 'success',
								duration: 2000
							});
							// 关闭商品海报
							this.onTogglePopup();
						},
						fail: err => {
							if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
								uni.showToast({
									title: '请允许访问相册后重试',
									icon: 'none',
									duration: 1000
								});
								setTimeout(() => {
									uni.openSetting();
								}, 1000);
							}
						}
					});
				}
			});
		},
		/**
		 * 确认发起砍价
		 */
		onCheckout() {
			if (this.disabled) {
				return false;
			}
			// 显示loading
			uni.showLoading({
				title: '正在处理...'
			});
			// 创建砍价活动订单
			this.$post(
				this.$api.postBargainTaskPartake,
				{
					active_id: this.active_id,
					goods_sku_id: this.goods_sku_id
				},
				res => {
					Route.navigateTo({
						url: `../task/index?task_id=${res.data.task_id}`
					});
				},
				null,
				() => {
					uni.hideLoading();
					// 解除按钮禁用
					this.disabled = false;
				}
			);
		}
	}
};
</script>

<style>
/* wxParse.wxss */
.container {
	padding-bottom: 112rpx;
}
.slide-image {
	background: #fff;
}
.banner-box {
	height: 750rpx;
} /* banner计数 */
.banner-num {
	position: absolute;
	right: 30rpx;
	margin-top: -70rpx;
	padding: 2rpx 18rpx;
	background: rgba(0, 0, 0, 0.363);
	border-radius: 50rpx;
	color: #fff;
	font-size: 26rpx;
} /* 商品信息 */
.goods-info {
	background: #fff;
	padding: 25rpx 30rpx;
}
.info-item__top {
	height: 54rpx;
	margin-bottom: 30rpx;
}
.info-item__top .active-tag {
	width: 108rpx;
	color: #fff;
	background: #fe293f;
	padding: 3rpx 5rpx;
	border-radius: 15rpx;
	font-size: 24rpx;
	text-align: center;
	margin-right: 15rpx;
}
.floor-price__samll {
	font-size: 26rpx;
	line-height: 1;
	color: #fe293f;
} /* 砍价底价 */
.floor-price {
	color: #fe293f;
	margin-right: 15rpx;
	font-size: 38rpx;
	line-height: 1;
	margin-bottom: -2rpx;
}
.original-price {
	font-size: 24rpx;
	line-height: 1;
	text-decoration: line-through;
	color: #959595;
}
.goods-sales {
	font-size: 24rpx;
	color: #959595;
}
.info-item__name .goods-name {
	font-size: 28rpx;
} /* 商品分享 */
.goods-share__line {
	border-left: 1rpx solid #f4f4f4;
	height: 60rpx;
	margin: 0 30rpx;
}
.goods-share .share-btn {
	line-height: normal;
	padding: 0;
	background: none;
	border-radius: 0;
	box-shadow: none;
	font-size: 8pt;
	border: none;
	color: #191919;
}
.goods-share .share-btn::after {
	border: none;
}
.goods-share .share__icon {
	font-size: 40rpx;
	margin-bottom: 5rpx;
} /* 商品卖点 */
.info-item_selling-point {
	margin-top: 15rpx;
	font-size: 24rpx;
	color: #808080;
} /* 活动状态 */
.info-item_status {
	margin-top: 20rpx;
	padding: 15rpx 20rpx;
	font-size: 24rpx;
	border-radius: 6rpx;
}
.info-item_status .countdown-icon {
	font-size: 28rpx;
	margin-right: 15rpx;
} /* 活动倒计时 */
.info-item_countdown {
	background: #f0f9ff;
	color: #8f8f8f;
}
.info-item_countdown .countdown-icon {
	color: #1397d8;
} /* 活动已结束 */
.info-item_end {
	background: #ccc;
	color: #fff;
} /* sku选择器 */
.sku-selector {
	padding: 25rpx 30rpx;
}
.item-title {
	font-size: 28rpx;
} /* 砍价玩法 */
.bargain-rules {
	padding: 20rpx 0;
	font-size: 29rpx;
}
.bargain-rules .item-title {
	padding: 0 30rpx;
}
.bargain-rules .rule-simple {
	margin-top: 35rpx;
	color: #737373;
}
.bargain-rules .i-number {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	margin-bottom: 15rpx;
	border: 1rpx dashed #c0c0c0;
} /* 商品评论 */
.goods-comment {
	padding: 20rpx 30rpx;
}
.goods-comment .item-title {
	font-size: 28rpx;
	margin-bottom: 30rpx;
}
.goods-comment .item-title .show-more {
	margin-right: 8rpx;
	font-size: 26rpx;
}
.comment-item {
	padding: 0 5rpx;
}
.user-info {
	margin-right: 15rpx;
}
.user-info .avatar {
	width: 50rpx;
	height: 50rpx;
	border-radius: 50%;
	margin-right: 10rpx;
}
.user-name {
	font-size: 24rpx;
}
.star-rating .star-icon {
	padding-right: 6rpx;
	color: #ccc;
	font-size: 26rpx;
}
.star-rating .star-icon.active {
	color: #f4a213;
}
.goods-comment-cont {
	font-size: 30rpx;
	color: #333;
	margin: 12rpx 0;
} /* 商品详情 */
.goods-content .item-title {
	padding: 20rpx 30rpx;
} /* 返回顶部 */
.widget-goTop {
	bottom: 210rpx;
} /* 底部操作栏 */
.footer-fixed {
	height: 92rpx;
}
.footer-container {
	width: 100%;
}
.foo-item-fast {
	box-sizing: border-box;
	width: 256rpx;
	line-height: 1;
}
.fast-item {
	padding: 0 10rpx;
	line-height: 1;
}
.fast-item .fast-icon {
	margin-bottom: 6rpx;
}
.fast-item.fast-item_home {
	margin-right: 30rpx;
}
.foo-item-fast .fast-icon {
	font-size: 46rpx;
}
.foo-item-fast .fast-text {
	font-size: 24rpx;
} /* 确认购买弹窗 */
.popup__trade {
	width: 750rpx;
	position: relative;
	padding-bottom: 92rpx;
	z-index: 999;
}
.popup__trade .trade-close {
	position: absolute;
	top: 20rpx;
	right: 20rpx;
	width: 50rpx;
	height: 50rpx;
}
.popup__trade .trade-main {
	background: #fff;
	box-sizing: border-box;
	padding: 30rpx 25rpx;
}
.popup__trade .footer-fixed {
	position: absolute;
	box-shadow: none;
}
.popup__trade .trade-main .goods-info .goods-image {
	margin-top: -80rpx;
	margin-right: 20rpx;
}
.popup__trade .trade-main .goods-info .goods-image image {
	width: 180rpx;
	height: 180rpx;
	border: 5rpx solid #fff;
	box-shadow: 0 4rpx 10rpx rgba(220, 220, 220, 0.79);
}
.popup__trade .trade-main .goods-info .line-price {
	color: #777;
	font-size: 26rpx;
	text-decoration: line-through;
	margin-left: 10rpx;
}
.popup__trade .trade-main .goods-info .goods-stock {
	padding-left: 10rpx;
	margin-top: 10rpx;
	color: #777;
	font-size: 26rpx;
}
.popup__trade .trade-main .goods-number {
	margin: 20rpx 0;
	justify-content: space-between;
}
.popup__trade .trade-main .goods-number .tips-text {
	color: #888;
	background: #fff;
	border-radius: 10rpx;
	margin-bottom: 10rpx;
	font-size: 26rpx;
} /* 商品规格 */
.goods-attr {
	padding: 10rpx 0;
}
.goods-attr .goods-attr--scroll {
	max-height: 600rpx;
}
.goods-attr .group-item .tips-text {
	font-size: 26rpx;
	color: #888;
	margin-bottom: 10rpx;
}
.goods-attr .group-item .spec-item {
	display: inline-block;
}
.goods-attr .group-item .spec-item {
	font-size: 26rpx;
	height: 55rpx;
	line-height: 55rpx;
	padding: 0 30rpx;
	margin: 0 20rpx 20rpx 0;
	border-radius: 8rpx;
	color: #888;
	border: 1px solid #e6e6e6;
}
.goods-attr .group-item .spec-item.cur {
	background: #f82169;
	border: 1rpx solid #f82169;
	color: #fff;
}
.goods-attr .group-item .spec-item.cur:after {
	position: absolute;
	bottom: 0;
	right: 0;
	content: '';
	display: inline-block;
	width: 16rpx;
	height: 16rpx;
}
.goods-attr .group-item .spec-item.disabled {
	color: #dedede;
	cursor: not-allowed;
	background: #eee;
	border: 2rpx dashed #dedede;
}
.select-number {
	width: 208rpx;
	height: 52rpx;
	flex-direction: row;
	border: 1rpx solid rgb(231, 231, 231);
	border-radius: 5rpx;
}
.select-number .default {
	float: left;
	width: 60rpx;
	height: 52rpx;
	line-height: 48rpx;
	padding: 0;
	background: #fff;
	color: #444;
	font-size: 40rpx;
	border-radius: unset;
}
.select-number .disabled {
	background: #f7f7f7;
	color: #ddd;
}
.select-number button:after {
	content: none;
	border: none;
}
.select-number input {
	float: left;
	width: 80rpx;
	height: 52rpx;
	line-height: 52rpx;
	border-right: 1rpx solid #eee;
	border-left: 1rpx solid #eee;
	text-align: center;
	font-size: 28rpx;
	color: #444;
}
</style>
